<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>网易的新闻列表</title>
	<link rel="stylesheet" href="./css/reset.css">
	<style>
		a {
			/* 去除下划线 */
			text-decoration: none;
		}

		/* 设置容器的样式 */
		.news-wrapper {
			/* 设置宽度 */
			width: 300px;
			/* 设置高度 */
			height: 357px;
			/*设置居中  */
			margin: 50px auto;
			/* 设置背景颜色，显示轮廓 */
			background-color: #bfa;

			/* 设置上边框 */
			border-top: 1px solid #ddd;
		}

		/* 设置news-title */
		.news-title {
			/* 为了边框和文字宽度一致，需要将h2转换为行内块元素 */
			display: inline-block;
			/* 设置高度 */
			height: 40px;
			line-height: 40px;
			/* 设置上边框  */
			border-top: 1px red solid;
			/* 通过margin-top将h2上移，盖住上边框 */
			margin-top: -1px;
		}

		/* 设置title中超链接的样式 */
		.news-title a {
			/* 设置颜色 */
			color: #40406B;
			/* 设置文字的加粗效果 */
			font-weight: bold;
		}

		/* 设置图片容器的高度  */
		.news-img {
			height: 150px;
		}


		/* 设置图片的文字效果 */
		.news-img .img-title {
			/* 向上移动文字 */
			margin-top: -30px;
			/* 设置字体颜色 */
			color: #fff;
			/* 设置加粗 */
			font-weight: bold;
			/* 设置padding */
			padding-left: 30px;

		}

		.news-list {
			margin-top: 20px;
		}

		.news-list li {
			margin-bottom: 17px;
		}

		/* 通过before伪元素，来为每一个li添加项目符号 */
		.news-list li::before {
			content: '■';
			color: rgb(218, 218, 218);
			font-size: 12px;
			margin-right: 4px;
		}

		/* 设置li中文字 */
		.news-list li a {
			/* 设置字体大小 */
			font-size: 14px;
			/* 设置字体颜色 */
			color: #666;
		}


		/* 设置超链接的鼠标移入的样式 */
		.news-list li a:hover {
			color: red;
		}
	</style>
</head>

<body>
	<!-- 创建新闻列表的外侧的容器 -->
	<div class="news-wrapper">
		<!-- 创建一个标题标签 -->
		<h2 class="news-title">
			<a href="#">体育</a>
		</h2>

		<!-- 创建一个图片的容器 -->
		<div class="news-img">
			<a href="#">
				<img src="./img/03/1.jpeg" alt="费德勒">
				<!-- 创建图片标题 -->
				<h3 class="img-title">
					费德勒首负迪米 扶额头不满发挥
				</h3>
			</a>
		</div>

		<!-- 新闻列表 -->
		<ul class="news-list">
			<li>
				<a href="#">乔治:我爱LA 喜欢和LBJ一起打球</a>
			</li>
			<li>
				<a href="#">格林:3年前降薪就在等KD 特制T恤嘲讽LBJ</a>
			</li>
			<li>
				<a href="#">塔克4000双鞋让保罗羡慕嫉妒 乔丹被震惊</a>
			</li>
			<li>
				<a href="#">CBA下季新赛制:常规赛4组循环 增至46轮</a>
			</li>
		</ul>

	</div>
</body>

</html>